<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
        .title {
            background: orange;
            width: 200px;
        }
    </style>
</head>
<body>
<div id="test"></div>
</body>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<!--将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--babel  由babel转换jsx-->
<script type="text/babel">
    const myId = 'aTgUiGu'
    const myData = 'Hello,rEaCt'
    // 1.创建虚拟DOM
    const VDOM = (
        <div>
            <h2 id={myId.toLowerCase()} className="title">
                <span style={{color: 'green', fontSize: '40px'}}>{myData.toLowerCase()}</span>
            </h2>
            <h2 id={myId.toUpperCase()} className="title">
                <span style={{color: 'green', fontSize: '30px'}}>{myData.toUpperCase()}</span>
            </h2>
            <input type="text"/>
            <good>123</good>
            <Good>123</Good>
        </div>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
    /*
    * jsx语法规则：
    *   1.定义虚拟DOM时，不要写引号
    *   2.标签中混入js表达式时使用{}
    *   3.样式类名指定要用className
    *   4.内联样式要用style={{key:value}}
    *   5.虚拟DOM必须只有一个根标签
    *   6.标签必须闭合
    *   7.标签首字母
    *       1）.若小写字母开头，则将标签改为html中同名元素，若html中无该标签则报错
    *       2）.若大写字母开头，react就去渲染对应的组件，未定义则报错
    * */
</script>
</html>